<script lang="ts" setup>
import SystemConfig from "~/config/SystemConfig";

const websiteConfig = SystemConfig.createTime

</script>

<template>
  <section class="flex tens fade-before fade-after"
           :style='"--pct:"+(Math.floor(timeDifference(websiteConfig) / 36.5))'>
    <h5 class="part-title">共赴十年之约</h5>
    <ul class="flex-ul">
      <li class="box progress"></li>
      <li class="start-date">
        <time>{{ timeInfoComputed(websiteConfig, 0) }}</time>
      </li>
      <li class="end-date">
        <time>{{ timeInfoComputed(websiteConfig, 10) }}</time>
      </li>
    </ul>
  </section>
</template>
<style scoped>
@import "@/static/css/home/ten-years.css";
.tens .progress:after {
  content: counter(progress) "%";
  counter-reset: progress var(--pct);
  font-weight: 700;
  color: var(--title-color);
  text-shadow: var(--title-shadow);
  background: var(--sun-color);
  width: calc(var(--pct) * 1%);
  max-width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--gap-divs);
  overflow: hidden;
}

.tens.fade-after .progress:after {
  animation: tens var(--pct,)/ 10) * 1 s);
}
</style>
